import React, { Component } from 'react'
import { Modal, Form, Input, message, Button } from 'antd'
import cloneDeep from 'lodash/cloneDeep'

import CheckItem from '../CheckItem'

import './index.less'

export default class RoleModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      treeData: props.treeData || [],
    }
  }

  onChange = () => {
    const { flag } = this.props
    if (flag === 'check') {
      return false
    }
    const { treeData } = this.state
    this.setState({
      treeData,
    })
  }

  onCancel = () => {
    const { onCancel } = this.props
    onCancel && onCancel()
  }

  onOk = () => {
    const { onOk } = this.props
    this.form.validateFields().then((values) => {
      const { treeData } = this.state
      const treeList = tree2List(cloneDeep(treeData))
      if (treeList.every(v => !v.checked)) {
        return message.error('角色权限不能为空')
      }
      onOk && onOk({
        ...values,
        treeList,
      })
    })
  }

  render() {
    const { visible, handleRecord, flag } = this.props
    const { treeData } = this.state
    const disabled = flag === 'check'
    return <Modal
      centered
      destroyOnClose
      title={`${flag === 'create' ? '添加角色' : flag === 'update' ? '修改角色' : '查看详情'}`}
      onCancel={this.onCancel}
      visible={visible}
      width={900}
      maskClosable={false}
      footer={!disabled && [
        <Button key="back" onClick={this.onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={this.onOk}>
          确定
        </Button>,
      ]}
      className="role-treeData-modal"
    >
      <Form
        initialValues={handleRecord}
        layout={'inline'} ref={c => this.form = c}>
        <Form.Item
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
          ]}
          label="角色名称:" name="name" className="mb24">
          <Input disabled={disabled} maxLength={15} style={{ width: '220px' }} placeholder="请输入角色名称" />
        </Form.Item>
        <Form.Item
          rules={[
            {
              required: true,
              message: '请输入角色简介',
            },
          ]}
          label="角色简介:" name="desc" className="mb24">
          <Input disabled={disabled} maxLength={15} style={{ width: '220px' }} placeholder="请输入角色简介" />
        </Form.Item>
        <Form.Item name="permissions">
          <p className="title mb12">功能权限:</p>
          <div className="treeData-wrap">
            {
              treeData.map(v => {
                return <CheckItem
                  onChange={this.onChange}
                  key={v.id}
                  data={v} />
              })
            }
          </div>
        </Form.Item>
      </Form>
    </Modal>
  }
}

function tree2List(nodes, arr = []) {
  for (const item of nodes) {
    arr.push({
      id: item.id,
      checked: !!item.checked,
    })
    if (item.children && item.children.length) {
      tree2List(item.children, arr)
    }
  }
  return arr
}
